<template>
	<view class="container">
		<!-- <view class="head">
			<van-button style="width: 100%;height:30px" @click="callHe" round plain icon="add-o"
				type="danger" >我要发布</van-button>
		</view> -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="publish">
				<van-icon name="plus" size="18" color="#8a8a8a" />
				<text>发布</text>
			</view>
		</view>
		<view v-if="list.length>0" class="main">
			<view class="cell" v-for="(item,index) in list" :key="index">
				<view class="cell-l">
					<image class="image" v-if="item.avatar" :src="setUrl(item.avatar,'Avatar/')" mode="aspectFill" />
					<image class="image" v-else :src="avatarUrl" mode="aspectFill" />
				</view>
				<view class="cell-r">
					<view class="cell-r-head">
						<view class="cell-r-head-name">
							<view class="">
								{{item.nickName}}
							</view>
							<view class="cell-r-head-name-date">
								{{handleDate(item.createTime)}}
							</view>
						</view>
						<van-button v-if="item.phone" @click="callHe(item)" round plain size="small" icon="phone-o"
							type="info" color="#1f48db">联系Ta</van-button>
					</view>
					<view class="cell-r-txt">
						<view v-html="setContent(item.content)"></view>
					</view>
					<view class="cell-r-imgs" v-if="item.imageArr&&item.imageArr.length>0">
						<view class="cell-r-imgs-img" v-for="(j,jIndex) in item.imageArr" :key="jIndex"
							@click.stop="previewImageClick(j,jIndex,item.imageArr)">
							<image class="picture" :src="setUrl(j,'Posts/')" mode="aspectFill" />
						</view>
					</view>
					<view class="cell-r-bot">
						<view class="cell-r-bot-control">
							<van-icon name="share-o" size="18" color="#8a8a8a" />
							<text>分享</text>
						</view>
						<view class="cell-r-bot-control" @click="focusInput">
							<van-icon name="comment-o" size="18" color="#8a8a8a" />
							<text>评论</text>
						</view>
						<view class="cell-r-bot-control" @click="likeBtn(item,index)">
							<van-icon v-if="item.isLike" name="good-job" size="18" color="#1f48db" />
							<van-icon v-else name="good-job-o" size="18" color="#8a8a8a" />
							<text v-if="item.likeCount>0">{{item.likeCount}}</text>
							<text v-else>赞</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="loading" class="loading">加载中...</view>
			<view v-if="page.pageIndex>=totalPages-1" class="loading">没有更多数据了</view>
		</view>
		<view v-else-if="!loading&&list.length==0" class="empty">
			<van-empty description="暂无数据" />
		</view>
	</view>
</template>

<script>
	import {
		getForumPosts,
		getForumComments,
		postLikePost
	} from '@/common/momentApi.js'

	import tool from "../../utils/common.js"
	export default {
		name: 'Moments',
		data() {
			return {
				key: 'value',
				page: {
					pageIndex: 0,
					pageSize: 20
				},
				totalPages: 0,
				loading: false,
				list: [],
				avatarUrl: '',
				isFolded: true,
				curIndex: null,
				comment: '',
				isFocus: false,
				safeAreaTop: 0,
				authCode:'',
				isLogin:'',
			}
		},
		onPullDownRefresh() {
			console.log(1)
			this.list = []
			this.page = {
				pageIndex: 0,
				pageSize: 20
			}
			this.getList()
			setTimeout(() => {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			console.log('底部')
			if (this.list.length > 0 && !this.loading) {
				if (this.page.pageIndex >= this.totalPages - 1) return
				this.page.pageIndex++
				this.getList()
			}
		},
		onShow() {
			uni.getUserInfo({
				provider: 'weixin',
				success: (infoRes) => {
					this.nickName = infoRes.userInfo.nickName
					this.avatarUrl = infoRes.userInfo.avatarUrl
				}
			})
		},
		onLoad() {
			this.isLogin = uni.getStorageSync('openId') ? true : false
			this.getList()
		},
		methods: {
			setUrl(val, type) {
				let url = `${getApp().globalData.ImgDomain}${type}${val}`
				return url
			},
			setContent(val) {
				let word = val.replace(/\n/g, '<br>')
				return word
			},
			onScrollToLower(event) {
				if (event.detail.direction === 'bottom' && this.list.length > 0 && !this.loading) {
					if (this.page.pageIndex >= this.totalPages - 1) return
					this.page.pageIndex++
					this.getList()
				}
			},
			/* 获取列表数据 */
			async getList() {
				this.loading = true
				let params = {
					pageIndex: this.page.pageIndex,
					pageSize: this.page.pageSize,
				}
				const res = await getForumPosts(params)
				console.log(res)
				// for (let i = 0; i < 20; i++) {
				// 	this.list.push(JSON.parse(JSON.stringify(this.list[0])))
				// }
				if (res.data) {
					this.list.push(...res.data)
				}
				this.totalPages = res.totalPages
				this.loading = false
			},
			toggleFold(cell, index) {
				if (this.curIndex != index) {
					if (this.curIndex !== null) {
						this.list[+this.curIndex].isFolded = true
					}
					this.curIndex = index
					cell.isFolded = !cell.isFolded;
				} else {
					cell.isFolded = !cell.isFolded; // 切换折叠状态
				}

			},
			foldTap() {
				// if (this.curIndex !== null) {
				// 	this.list[+this.curIndex].isFolded = true
				// }
			},
			// 联系Ta
			callHe(val) {
				tool.callPhone(val.phone)
			},
			// 评论
			focusInput() {
				this.isFocus = true; // 设置聚焦状态
			},
			// 点击按钮聚焦输入框
			focusInput() {
				this.isFocus = true; // 设置聚焦状态
			},

			// 输入框失去焦点时触发
			onBlur() {
				this.isFocus = false; // 取消聚焦状态
			},
			// 处理日期时间
			handleDate(val) {
				if (!val) return
				return tool.handleCommentDate(val)
			},
			// 发布
			async publish() {
				if (!this.isLogin) {
					console.log('menu', this.authCode)
					const loginRes = await uni.login({
						provider: 'weixin'
					})
					const res = await getUserExistCode({
						code: loginRes.code
					});
					if (res && res.openId) {
						getApp().globalData.sessionKey = res.sessionKey
						getApp().globalData.openId = res.openId
						console.log('res', res)
						if (!res.isLogined) {
							return uni.navigateTo({
								url: `../login/index`
							});
						} else {
							uni.setStorageSync('openId', res.openId)
						}
					}
				}
				// 跳转路由
				uni.navigateTo({
					url: `../moments/publish`
				});
			},
			// 点赞
			async likeBtn(row, index) {
				const res = await postLikePost({
					postId: row.id
				})
				if (res.data) {
					// this.getList()
					let params = {
						pageIndex: 0,
						pageSize: this.list.length,
					}
					const res1 = await getForumPosts(params)
					console.log(res1)
					if (res1.data) {
						// this.list = res1.data
						let findObj = res1.data.find(i => i.id == row.id)
						row.likeCount = findObj.likeCount
						row.isLike = true
					}
				} else {
					uni.showToast({
						title: '发布失败' + res.message,
						icon: 'none',
					})
				}
			},
			previewImageClick(val, index, arr) {
				let list = arr.map(i => this.setUrl(i, 'Posts/'))
				uni.previewImage({
					current: index,
					urls: list,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		// height: 100vh;
		// overflow-x: hidden;
		// overflow-y: auto;
		background-color: #fff;
		box-sizing: border-box;

		.head {
			position: sticky;
			top: 0;
			height: 50px;
			border-bottom: 1px solid #ebebeb;
			z-index: 9;
			padding: 10px 15px;
			box-sizing: border-box;
		}

		.cell {
			border-bottom: 1px solid #ebebeb;
			padding: 15px;
			box-sizing: border-box;
			display: flex;

			&-l {
				width: 60px;
				margin-right: 5px;

				.image {
					height: 50px;
					width: 50px;
					border-radius: 5px;
				}
			}

			&-r {
				flex: 1;
				padding-top: 5px;
				font-size: 16px;

				&-head {
					display: flex;
					justify-content: space-between;

					&-name {
						color: #5f688e;
						font-weight: bold;

						&-date {
							color: #8a8a8a;
							font-weight: normal;
							font-size: 12px;
							margin-top: 5px;
						}
					}
				}

				&-txt {
					margin-top: 10px;
				}

				&-imgs {
					margin-top: 8px;
					display: flex;
					flex-wrap: wrap;

					&-img {
						flex: 1;
						max-width: 180px;
						margin: 5px 5px 5px 0;
						background-color: #fff;
						overflow: hidden;

						.picture {
							max-width: 180px;
							width: 100%;
							height: 135px;
						}
					}
				}

				&-bot {
					margin-top: 20px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 13px;
					color: #8a8a8a;
					box-sizing: border-box;
					padding-right: 10px;

					&-control {
						display: flex;
						align-items: center;

						text {
							margin-left: 5px;
						}
					}
				}
			}
		}

		.loading {
			height: 45px;
			line-height: 45px;
			width: 100%;
			text-align: center;
			color: #a8a8a8;
		}

		.empty {
			padding-top: 45px;
			box-sizing: border-box;
			height: calc(100vh - 135px);
			text-align: center;
			color: #a8a8a8;
			font-size: 14px;
		}
	}

	.input-box {
		width: 100%;
		position: fixed;
		z-index: 9;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 10px 10px 10px 15px;
		display: flex;
		align-items: flex-end;
		background-color: #ececec;

		.inputArea {
			flex: 1;
			min-height: 45px;
			box-sizing: border-box;
			max-height: 200px;
			padding: 5px 5px 0;
			line-height: 45px;
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #fff;
			overflow-y: auto;
		}

		.send {
			padding-left: 10px;
			padding-bottom: 5px;

			&-btn {
				width: 60px;
				height: 35px;
				text-align: center;
				line-height: 35px;
				background-color: #58be6b;
				color: #fff;
				border-radius: 5px;
			}
		}
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		height: 55px;
		padding: 0 10px;
		background-color: #fff;
		color: black;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #ececec;
		display: flex;
		align-items: center;
	}

	.navbar-left {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		color: #8a8a8a;
		border-radius: 20px;

		text {
			margin-left: 8px;
		}
	}

	.navbar-title {
		flex: 1;
		text-align: center;
		font-size: 16px;
	}

	.refresh-tip {
		text-align: center;
		padding: 10px;
		background-color: #f0f0f0;
	}
</style>